<template>
<div class="box">
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{title}}</el-checkbox>

    <div class="group" :style="{height:height}">
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
    </div>

</div>
</template>

<script>
// 1:申请趋势
// 2.申请人排名
// 3.申请人专利类型
// 4.申请人申请占比
// 5.发明人排名
// 6.发明人专利类型
// 7.发明人申请占比
// 8.代理机构排名
// 9.代理机构专利类型
// 10.代理机构申请占比
const cityOptions = ['申请趋势', '申请人排名', '申请人专利类型', '申请人申请占比','发明人排名','发明人专利类型','发明人申请占比','代理机构排名','代理机构专利类型','代理机构申请占比' ];
export default {
    name: "DateItem",

    props: {
        height: {
            type: String,
            default: ""
        },
        title:{
            type: String,
            default:""
        }
    },

    data() {
        return {
            checkAll: false,
            checkedCities: ['上海', '北京'],
            cities: cityOptions,
            isIndeterminate: true
        };
    },
    methods: {
        handleCheckAllChange(val) {
            this.checkedCities = val ? cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        }
    },
};
</script>

<style lang="scss" scoped>
.box {
    width:  calc(100% + 40px) ;
    // background-color: red;

    display: flex;
    flex-direction: column !important;
    padding: 20px;
    box-sizing: border-box;
    
    .group{
        overflow: auto;
        padding-bottom: 20px;
    }

    ::v-deep .el-checkbox:last-of-type {
        height: 40px;
        border-bottom: 1px solid #ebebeb;
    }

    .el-checkbox-group {
       
        display: flex;
        flex-direction: column;

        .el-checkbox {
            padding-top: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid #ebebeb;
        }
    }
}
</style>
